<template>
  <el-divider style="width: 100%"
    ><span style="font-size: 23px; font-family: '楷体'">卓越班人才信息</span></el-divider
  >
  <el-form style="margin-left: 80%">
    <el-form-item>
      <el-button type="primary" @click="exportEnterInfo"
        ><el-icon style="margin-right: 5px" size="18px"><Upload /></el-icon>导出入班人员信息表
      </el-button>
    </el-form-item>
  </el-form>
  <!--  搜索表单-->
  <el-form :inline="true" v-model="enterClass" style="margin-top: -20px">
    <el-form-item label="学号: ">
      <el-input
        style="width: 200px"
        v-model="enterClass.studentId"
        type="text"
        autocomplete="off"
        placeholder="输入搜索学号"
      />
    </el-form-item>
    <el-form-item label="姓名: ">
      <el-input
        style="width: 200px"
        v-model="enterClass.stuName"
        type="text"
        autocomplete="off"
        placeholder="输入搜索姓名"
      />
    </el-form-item>
    <el-form-item label="卓越班班级">
      <el-select
        v-model="enterClass.className"
        placeholder="选择卓越班名称"
        style="width: 200px"
        clearable
      >
        <el-option v-for="item in classNameList" :label="item.value" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">搜索</el-button>
      <el-button type="info" @click="resetForm">清空 </el-button>
    </el-form-item>
  </el-form>

  <!--  学生列表-->
  <el-table :data="enterClassInfo" border @sort-change="sortByStuGrade">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column property="stuName" label="姓名" width="100" align="center" />
    <el-table-column property="studentId" label="学号" width="150" align="center" />
    <el-table-column property="stuSpeciality" label="专业" align="center" />
    <el-table-column property="stuClass" label="班级" align="center" />
    <el-table-column
      property="stuGrade"
      label="年级"
      width="100"
      align="center"
      sortable="custom"
    />
    <el-table-column prop="className" label="卓越班班级" width="200" align="center" />
    <el-table-column property="updateTime" label="入班时间" width="190" sortable align="center" />
    <el-table-column label="操作" align="center" width="180">
      <template v-slot="{ row }">
        <el-button type="primary" @click="goDetail(row)">详情</el-button>
        <el-button type="danger" @click="deleteStudent({ ...row }.studentId)">退班</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--  详情对话框-->
  <el-dialog
    v-model="dialogDetailVisible"
    align-center
    center
    title="学生详细信息"
    width="50%"
    style="height: 700px; background-color: #d1edc4"
  >
    <div class="info-box">
      <div class="item-box">
        <el-image
          v-if="diaForm.stuImage"
          style="width: 100px;display: block; float: left"
          :src="diaForm.stuImage"
        />
        <div
          v-else
          style="
          width: 100px;height: 150px;display: flex; float: left;
          background-color: #fff;align-items: center;justify-content: center;">
          无照片
        </div>
        <span class="label">姓名：</span>
        <span class="des">{{ diaForm.stuName }}</span>

        <span class="label">性别：</span>
        <span class="des">{{ diaForm.stuSex }}</span>

        <span class="label">学号：</span>
        <span class="des">{{ diaForm.studentId }}</span>

        <span class="label">电话：</span>
        <span class="des">{{ diaForm.stuPhone }}</span>

        <br />
        <span class="label">学院：</span>
        <span class="des">{{ diaForm.stuDepartment }}</span>

        <span class="label">专业：</span>
        <span class="des">{{ diaForm.stuSpeciality }}</span>

        <span class="label">年级：</span>
        <span class="des">{{ diaForm.stuGrade }}</span>

        <br />
        <span class="label">班级：</span>
        <span class="des">{{ diaForm.stuClass }}</span>

        <span class="label">邮箱：</span>
        <span class="des">{{ diaForm.email }}</span>

        <br />
        <span class="label">竞赛信息：</span>
        <div
          v-if="diaForm.contest != null && diaForm.contest != ''"
          style="color: #333333; margin-left: 80px"
          v-for="(item, index) in diaForm.contest"
          :key="index"
        >
          <div>
            奖项{{ index + 1 }}：{{
              item.conName + '&nbsp;&nbsp;&nbsp;&nbsp;获奖时间：' + item.conTime
            }}<br />
          </div>
        </div>
        <span v-else>无<br /></span>

        <span class="label">个人技能：</span>
        <span class="des">{{ diaForm.stuSkill + '，' + diaForm.stuSkillStack }}</span>

        <br />
        <span class="label">个人意向：</span>
        <span class="des">{{ diaForm.stuIntention }}</span>
      </div>
    </div>
  </el-dialog>
  <div style="margin-top: 10px">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 25]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      @size-change="SizeChange"
      @current-change="CurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { deleteStudentInfo, ExportEnterInfo, getEnterClassInfo } from '@/apis/enterClass'
import { getAllClassNameService } from '@/apis/dataCount'

const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(30)
const diaForm = ref({})
const dialogDetailVisible = ref(false)
const classNameList = ref([{ value: '' }])
const sortByStuGrade = (k: any) => {
  for (let i = 0; i < enterClassInfo.value.length; i++) {
    if (enterClassInfo.value[i].stuGrade === '大一') enterClassInfo.value[i].gradeKey = 1
    if (enterClassInfo.value[i].stuGrade === '大二') enterClassInfo.value[i].gradeKey = 2
    if (enterClassInfo.value[i].stuGrade === '大三') enterClassInfo.value[i].gradeKey = 3
    if (enterClassInfo.value[i].stuGrade === '大四') enterClassInfo.value[i].gradeKey = 4
  }
  if (k.order === 'ascending') {
    enterClassInfo.value.sort((a, b) => (a.gradeKey > b.gradeKey ? 1 : -1))
  }
  if (k.order === 'descending') {
    enterClassInfo.value.sort((a, b) => (a.gradeKey > b.gradeKey ? -1 : 1))
  }
}
const submitForm = () => {
  currentPage.value = 1
  page()
}
const resetForm = () => {
  enterClass.value.studentId = ''
  enterClass.value.stuName = ''
  enterClass.value.className = ''
  page()
}
interface EnterClassInfo {
  stuName: string
  studentId: string
  stuSpeciality: string
  stuClass: string
  stuGrade: string
  updateTime: string
}

const enterClassInfo = ref<EnterClassInfo[]>([
  {
    stuName: 'xiaochuanwen',
    studentId: '202101140140',
    stuSpeciality: 'wangluogongcheng',
    stuClass: '网工1班',
    stuGrade: '大三',
    updateTime: '2023-11-23 17:32:15'
  }
])

const enterClass = ref({
  stuName: '',
  studentId: '',
  className: ''
})
const goDetail = (row: any) => {
  diaForm.value = {}
  dialogDetailVisible.value = true
  diaForm.value = { ...row }
}

const page = () => {
  getEnterClassInfo(
    enterClass.value.studentId,
    enterClass.value.stuName,
    enterClass.value.className,
    pageSize.value,
    currentPage.value
  ).then((res) => {
    if (res.data.code === 1) {
      console.log('获取成功')
      enterClassInfo.value = res.data.data.rows
      total.value = res.data.data.total
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
      console.log('获取失败')
    }
  })
}

const exportEnterInfo = async () => {
  if (enterClass.value.className === '') {
    ElMessage({ type: 'error', message: '请选择导出哪一届卓越班学生信息' })
    return
  }
  const { data } = await ExportEnterInfo(enterClass.value.className)
  let url = window.URL.createObjectURL(data)
  var a = document.createElement('a')
  document.body.appendChild(a)
  a.href = url
  a.download = '入班人员信息表.xlsx'
  a.click()
  window.URL.revokeObjectURL(url)
}
const deleteStudent = (studentId: string) => {
  ElMessageBox.confirm('确认删除该学生吗?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteStudentInfo(studentId).then((res) => {
        if (res.data.code === 1) {
          ElMessage({ type: 'success', message: '删除成功' })
          page()
        } else {
          ElMessage({ type: 'error', message: res.data.msg })
        }
      })
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '取消删除' })
    })
}
onMounted(() => {
  getAllClassNameService().then((res) => {
    if (res.data.code === 1) {
      let className = res.data.data
      for (let v of className) {
        classNameList.value.push({ value: v })
      }
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
    }
  })
  page()
})
const SizeChange = (val: number) => {
  pageSize.value = val
  page()
}
const CurrentChange = (val: number) => {
  currentPage.value = val
  page()
}
</script>

<style>
.info-box {
  margin: -15px -10px 20px;
}
.info-box .item-box {
  height: 20px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  text-align: left;
  margin-bottom: 14px;
}
.info-box .item-box .label {
  width: 50px;
  margin-left: 40px;
}
.info-box .item-box .des {
  color: #333333;
}
</style>
